<template>
  <div class="admin-manage-container">
    <el-main>
      <!-- 用户增长曲线图 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 第一行：用户增长 -->
      <el-row>
        <el-col :span="24">
          <div
            class="user-growth"
            ref="userGrowthChart"
            style="width: 100%; height: 250px"
          ></div>
          <i class="el-icon-refresh-right" @click="drawUserGrowth"> 刷新</i>
        </el-col>
      </el-row>
      <!-- 第三行：关系图 + 状态饼图 -->
      <el-row>
        <el-col :span="15">
          <div
            class="user-graph"
            ref="userGraphChart"
            style="width: 100%; height: 250px"
          ></div>
          <i class="el-icon-refresh-right" @click="drawUserGraph"> 刷新</i>
        </el-col>
        <el-col :span="8" :offset="1">
          <div
            class="user-status"
            ref="userStatusChart"
            style="width: 100%; height: 250px"
          ></div>
          <i class="el-icon-refresh-right" @click="drawUserStatus"> 刷新</i>
        </el-col>
      </el-row>
      <!-- 第二行：订单柱状图 + 地域饼图 -->
      <el-row>
        <el-col :span="10">
          <div
            class="region-sales"
            ref="regionSalesChart"
            style="width: 100%; height: 250px"
          ></div>
          <i class="el-icon-refresh-right" @click="drawRegionChart"> 刷新</i>
        </el-col>
        <el-col :span="13" :offset="1">
          <div
            class="order-stats"
            ref="orderStatsChart"
            style="width: 100%; height: 250px"
          ></div>
          <i class="el-icon-refresh-right" @click="drawOrderChart"> 刷新</i>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>
import * as echarts from "echarts";
import data from "../../../src/assets/echartTheme.json";

export default {
  data() {
    return {
      userGrowthData: [],
      userRelationData: {},
      userStatusData: [],
      regionStatusData: [],
      orderStatusData: [],
    };
  },
  created() {
    echarts.registerTheme("echartTheme", data);
    this.$axios.get("/stat/user/trend/daily").then((res) => {
      if (res.data.code === 200) {
        this.userGrowthData = res.data.data;
        this.drawUserGrowth();
      }
    });
    this.$axios.get("/stat/user/graph").then((res) => {
      if (res.data.code === 200) {
        this.userRelationData = res.data.data;
        this.drawUserGraph();
      }
    });
    this.$axios.get("/stat/user/status-ratio").then((res) => {
      if (res.data.code === 200) {
        this.userStatusData = res.data.data;
        this.drawUserStatus();
      }
    });
    this.$axios.get("/stat/order/region-sales").then((res) => {
      if (res.data.code === 200) {
        this.regionStatusData = res.data.data;
        // console.log(this.regionStatusData);
        this.regionStatusData = this.regionStatusData.map((item) => {
          return { value: item.sales, name: item.region };
        });
        this.drawRegionChart();
      }
    });
    this.$axios.get("/stat/order/trade-daily").then((res) => {
      if (res.data.code === 200) {
        this.orderStatusData = res.data.data;
        this.drawOrderChart();
      }
    });
  },
  mounted() {},
  methods: {
    drawUserGrowth() {
      const dom = this.$refs.userGrowthChart;
      echarts.getInstanceByDom(dom) && echarts.getInstanceByDom(dom).dispose();
      const chart = echarts.init(dom, "echartTheme");
      chart.setOption({
        title: { text: "用户增长曲线", left: "left" },
        tooltip: { trigger: "axis" },
        legend: { orient: "horizontal", left: "center", top: "20px" },
        grid: {
          top: "80px",
          bottom: "60px", // 给 dataZoom 留出足够空间
          left: "60px", // 给 y 轴刻度留空间，防止左侧被挡
          right: "20px",
          containLabel: true, // 防止坐标轴标签被裁剪
        },
        xAxis: {
          type: "category",
          data: this.userGrowthData.map((item) => item.date),
        },
        yAxis: { type: "value" },
        series: [
          {
            name: "用户数",
            type: "line",
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#4ea397b8" },
                { offset: 1, color: "#22c3aa99" },
              ]),
            },
            data: this.userGrowthData.map((item) => item.cumulative),
          },
        ],
        dataZoom: [
          {
            type: "slider", // 底部时间轴缩放条
            show: true,
            xAxisIndex: 0, // 作用于哪个轴
            start: 0, // 初始显示百分比范围
            end: 100,
          },
          {
            type: "inside", // 鼠标滚轮缩放支持
            xAxisIndex: 0,
            start: 0,
            end: 100,
          },
        ],
      });
    },
    drawOrderChart() {
      const dom = this.$refs.orderStatsChart;
      echarts.getInstanceByDom(dom) && echarts.getInstanceByDom(dom).dispose();
      const chart = echarts.init(dom, "echartTheme");
      chart.setOption({
        title: { text: "订单数据统计", left: "left" },
        tooltip: {},
        grid: {
          top: "80px",
          bottom: "20px",
        },
        legend: { data: ["订单数", "销售额"], left: "center" },
        xAxis: {
          type: "category",
          data: this.orderStatusData.map((item) => item.date),
        },
        yAxis: [
          {
            type: "value",
            name: "订单数",
          },
          {
            type: "value",
            name: "销售额",
            position: "right",
          },
        ],
        series: [
          {
            name: "订单数",
            type: "bar",
            data: this.orderStatusData.map((item) => item.orderCount),
            yAxisIndex: 0, // 映射到第一个 yAxis
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
          },
          {
            name: "销售额",
            type: "bar",
            data: this.orderStatusData.map((item) => item.totalAmount),
            yAxisIndex: 1, // 映射到第二个 yAxis
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
          },
        ],
      });
    },
    drawRegionChart() {
      const dom = this.$refs.regionSalesChart;
      echarts.getInstanceByDom(dom) && echarts.getInstanceByDom(dom).dispose();
      const chart = echarts.init(dom, "echartTheme");
      chart.setOption({
        title: { text: "地域销量分布", left: "left" },
        tooltip: { trigger: "item" },
        legend: {
          orient: "horizontal",
          top: "20px",
          left: "center",
          textStyle: {
            fontSize: 8,
          },
        },
        series: [
          {
            name: "销量",
            type: "pie",
            top: "80px",
            radius: ["40%", "70%"],
            data: this.regionStatusData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    drawUserGraph() {
      const dom = this.$refs.userGraphChart;
      echarts.getInstanceByDom(dom) && echarts.getInstanceByDom(dom).dispose();
      const chart = echarts.init(dom, "echartTheme");
      chart.setOption({
        title: { text: "用户关系网络图", left: "left" },
        tooltip: {},
        series: [
          {
            type: "graph",
            layout: "force",
            roam: true,
            label: {
              show: true,
              position: "right",
              formatter: "{b}",
              color: "#d0648a",
            },
            symbol: "circle",
            force: {
              repulsion: 100,
              edgeLength: 100,
            },
            data: this.userRelationData.nodes.map((n) => ({
              ...n,
              symbolSize: 10, // 自定义缩放规则
            })),
            links: this.userRelationData.links,
          },
        ],
      });
    },
    drawUserStatus() {
      const dom = this.$refs.userStatusChart;
      echarts.getInstanceByDom(dom) && echarts.getInstanceByDom(dom).dispose();
      const chart = echarts.init(dom, "echartTheme");
      chart.setOption({
        title: { text: "用户状态分布", left: "left" },
        tooltip: { trigger: "item" },
        legend: { orient: "horizontal", top: "30px", left: "center" },
        series: [
          {
            name: "状态",
            type: "pie",
            top: "60px",
            data: this.userStatusData,
            radius: ["40%", "70%"],
          },
        ],
      });
    },
  },
};
</script>



<style lang="scss">
.admin-manage-container {
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
  .el-row {
    margin-bottom: 50px;
  }
  .el-col {
    position: relative;
    padding: 30px;
    border-radius: 50px;
    background-color: #f5f7f989;
    //border: 3px solid #f5f7f9;
    // box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.155);
    i {
      position: absolute;
      top: 0;
      right: 0;
      padding: 30px;
      color: #a0a1a7;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .el-breadcrumb {
    margin-bottom: 20px;
  }
  .user-growth {
    padding-bottom: 30px;
    // margin-bottom: 120px;
  }
  .order-stats,
  .region-sales {
    margin-bottom: 0px;
  }
}
</style>
